<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {
        'packages' : [ 'corechart' ]
    });
 
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
 
    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
 
        // Create the data table.    
        var data = google.visualization.arrayToDataTable([
                                                              ['Country', 'Area(square km)'],
                                                              <c:forEach items="${pieDataList}" var="entry">
                                                                  [ '${entry.key}', ${entry.value} ],
                                                              </c:forEach>
                                                        ]);
        // Set chart options
        var options = {
            'title' : 'Area-wise Top Seven Countries in the World',
            is3D : true,
            pieSliceText: 'label',
            tooltip :  {showColorCode: true},
            'width' : 900,
            'height' : 500
        };
 
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>
</head>
<body>
    <div style="width: 600px;">
        <div id="chart_div"></div>
    </div>
    
 <c:if test="${!empty listTest}">
	<table class="table table-hover" id="table">
		<tr>
			<th width="80">ID</th>
			<th width="80">Giảng viên</th>
			<th width="80">Tuần</th>
			<th width="120">Ngày</th>
			<th width="80">Thời gian bắt đầu</th>
			<th width="120">Thời gian kết thúc</th>
			<th width="120">Nội dung</th>
			<th width="120">Địa điểm</th>
			<th width="120">Ghi chú</th>			
		</tr>
		<c:forEach items="${listTest}" var="lichlamviec">
		<tr id="rows">
			<td>${lichlamviec.idPhanCong}</td>
			<%-- <td>${lichlamviec.nguoiPhanCong}</td> --%>
		 </tr>
		</c:forEach>
	</table>
</c:if>
 
</body>
</html>